<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <!-- <el-form-item>
          <el-input v-model="filters.id" placeholder="ID"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="filters.productCname" placeholder="产品中文名"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-input v-model="filters.productEname" placeholder="产品英文名"></el-input>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-date-picker v-model="filters.date" type="daterange" placeholder="选择起止日期范围" style="width:100%;"></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-select v-model="filters.riskCode" placeholder="险种">
            <el-option label="全部险种"  value=""  ></el-option>
            <el-option v-for="(item,index) in riskCodes" :key="index" :label="item.codeCname"  :value="item.code"  ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效起期">
          <el-date-picker type="date" placeholder="选择日期" v-model="filters.startDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="有效止期">
          <el-date-picker type="date" placeholder="选择日期" v-model="filters.endDate"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getProducts">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="export2Excel">导出</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="products" stripe border height='480' highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55" >
      </el-table-column>
      <el-table-column prop="id" label="ID" width="120" sortable>
      </el-table-column>
      <el-table-column prop="productCname" label="产品中文名" width="180">
      </el-table-column>
      <el-table-column prop="productEname" label="产品英文名" width="180">
      </el-table-column>
      <el-table-column prop="riskCode" label="险种" min-width="150" :formatter="formatRisk" sortable>
      </el-table-column>
      <!-- <el-table-column prop="hotFlag" label="是否热销" width="120" :formatter="formathotFlag" sortable>
      </el-table-column> -->
      <el-table-column prop="startDate" label="有效起期" width="120" sortable>
      </el-table-column>
      <el-table-column prop="endDate" label="有效止期" min-width="180" sortable>
      </el-table-column>
      <el-table-column prop="deadLine" label="保障期限" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="maxAge" label="最大年龄" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="minAge" label="最小年龄" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="quantity" label="销量" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="priPrice" label="原价" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="discountPrice" label="折扣价" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="minPrice" label="最低价格" min-width="120" sortable>
      </el-table-column>
      <el-table-column label="操作" fixed='right' min-width="260">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="warning" size="small"  @click="handlePlan(scope.$index, scope.row)">设置计划</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--修改界面-->
    <el-dialog title="修改" v-model="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" :inline="true" label-width="120px" :rules="editFormRules" ref="editForm">
                <el-form-item label="产品中文名"  prop="productCname">
                    <el-input v-model="editForm.productCname"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品英文名" prop="aname">
                    <el-input v-model="editForm.productEname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品大类" prop="aname">
                    <el-input v-model="editForm.productType" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="aname">
                    <el-input v-model="editForm.serialNo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="险种" prop="riskCode">
                  <el-select v-model="editForm.riskCode" style="width:187px;"  placeholder="险种">
                    <el-option label="全部险种"  value=""  ></el-option>
                    <el-option v-for="(item,index) in riskCodes" :key="index" :label="item.codeCname"  :value="item.code"  ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否显示" prop="name">
                  <el-select v-model="editForm.isShow"  style="width:187px;" placeholder="是否显示">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="有效起期" prop="startDate">
                    <el-date-picker type="date" placeholder="选择日期" style="width:187px;" v-model="editForm.startDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="有效止期" prop="endDate">
                    <el-date-picker type="date" placeholder="选择日期" style="width:187px;" v-model="editForm.endDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="销量" prop="quantity">
                    <el-input v-model="editForm.quantity" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="原价" prop="name">
                    <el-input v-model="editForm.priPrice" auto-complete="off" placeholder="元"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="折扣价" prop="name">
                    <el-input v-model="editForm.discountPrice" auto-complete="off" placeholder="元"></el-input>
                </el-form-item>
                <el-form-item label="最低价格" prop="minPrice">
                    <el-input v-model="editForm.minPrice" auto-complete="off" placeholder="元"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="最大年龄" prop="maxAge">
                    <el-input v-model="editForm.maxAge" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="最小年龄" prop="minAge">
                    <el-input v-model="editForm.minAge" auto-complete="off"></el-input>
                  </el-col>
                </el-form-item>
          </el-form>
          <el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editForm">
              <el-form-item label="产品介绍"  prop="name">
               <!--  <el-input v-model="editForm.introduceUrl"  auto-complete="off"></el-input> -->
                  <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="editSuccessIntroduceUrl"
                  :on-remove="editRemoveIntroduceUrl"
                  :file-list="fileList2IntroduceUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
              </el-form-item>
              <el-form-item label="保障方案"  prop="name">
                <!-- <el-input v-model="editForm.schemeUrl"  auto-complete="off"></el-input> -->
                <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="editSuccessSchemeUrl"
                  :on-remove="editRemoveSchemeUrl"
                  :file-list="fileList2SchemeUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="图标地址"  prop="name">
                 <!--  <el-input  id="file" v-model="editForm.imgUrl" auto-complete="off" /></el-input> -->
                 <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="editSuccessImgUrl"
                  :on-remove="editRemoveImgUrl"
                  :file-list="fileList2ImgUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="服务详情"  prop="name">
                <!-- <el-input v-model="editForm.detailUrl"  auto-complete="off"></el-input> -->
                <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="editSuccessDetailUrl"
                  :on-remove="editRemoveDetailUrl"
                  :file-list="fileList2DetailUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="备注"  prop="name">
                <el-input v-model="editForm.remark"  auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item label="服务详情"  prop="name">
                <el-input v-model="editForm.detailUrl"  auto-complete="off"></el-input>
              </el-form-item> -->
              <el-form-item label="描述" prop="name">
                <el-input  type="textarea"  v-model="editForm.descrition" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="详细介绍" prop="name">
                <el-input type="textarea"  v-model="editForm.detail" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="计划" prop="name">
                <el-card class="box-card">
                  <el-button type="primary" @click="planAdd">添加</el-button>
                    <el-card v-for="(temp,index) in editForm.tbSpPlans" :key="index" class="box-card" style="margin-top:10px;">
                        <span style="line-height: 36px;">计划{{index+1}}</span>
                        <el-button type="primary" v-show="planShow(index)" style="float:right;"  @click="planRemove(index,'edit')">删除</el-button>
                        <el-form-item label="ID" prop="name">
                          <el-input v-model="temp.planId" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="序号" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.serialNo" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="计划名称" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.planName" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="投保声明" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.statement" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="理赔须知" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.notice" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="name" style="margin-top:10px;">
                          <el-input type="textarea" v-model="temp.remark" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                         <el-form-item label="保险条款"  prop="name">
                            <!-- <el-upload
                              class="upload-demo"
                              ref="upload2"
                              :action="picURL"
                              :file-list="temp.clauseUrl"
                              :auto-upload="false"
                              :multiple="true">
                              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadEdit">上传到服务器</el-button>
                            </el-upload> -->
                            <el-upload
                              class="upload-demo"
                              :action="picURL"
                              :on-success="EdithandlePreview"
                              :file-list="fileLists[index]"
                              :multiple="true">
                              <el-button size="small" type="primary" @click='uploadClause(index)'>点击上传</el-button>
                            </el-upload>
                        </el-form-item>

                    </el-card>
                </el-card>
              </el-form-item>
          </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增"  v-model="addFormVisible" :close-on-click-modal="false">
          <el-form :model="addForm" :inline="true" label-width="120px" :rules="addFormRules" ref="addForm">
                <el-form-item label="产品中文名" prop="productCname">
                    <el-input v-model="addForm.productCname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品英文名" prop="aname">
                    <el-input v-model="addForm.productEname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品大类" prop="aname">
                    <el-input v-model="addForm.productType" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="aname">
                    <el-input v-model="addForm.serialNo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="险种" prop="riskCode">
                  <el-select v-model="addForm.riskCode" style="width:187px;"  placeholder="险种">
                    <el-option label="全部险种"  value=""  ></el-option>
                    <el-option v-for="(item,index) in riskCodes" :key="index" :label="item.codeCname"  :value="item.code"  ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否显示" prop="name">
                  <el-select v-model="addForm.isShow"  style="width:187px;" placeholder="是否显示">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="有效起期" prop="name">
                    <el-date-picker type="date" placeholder="选择日期" style="width:187px;" v-model="addForm.startDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="有效止期" prop="name">
                    <el-date-picker type="date" placeholder="选择日期" style="width:187px;" v-model="addForm.endDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="保障期限"  prop="deadLine">
                  <el-input v-model="addForm.deadLine"  auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="是否热销" prop="aname">
                    <el-select v-model="addForm.hotFlag" @change="IsHotF" style="width:187px;" placeholder="是否热销">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item> -->

                  <!-- <el-form-item v-show='ishotValue'  label="热销序号" prop="name">
                      <el-input v-model="addForm.tbSpHotproduct.serialNo" auto-complete="off"></el-input>
                  </el-form-item> -->
                  <!-- <el-form-item v-show='ishotValue' label="地区" prop="name">
                    <el-select  v-model="addForm.tbSpHotproduct.branchCode" style="width:187px;"  placeholder="地区">
                      <el-option label="重庆" value="1"></el-option>
                      <el-option label="北京" value="2"></el-option>
                    </el-select>
                  </el-form-item> -->
                <el-form-item label="销量" prop="quantity">
                    <el-input v-model="addForm.quantity" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="原价" prop="name">
                    <el-input v-model="addForm.priPrice" auto-complete="off" placeholder="元">
                    </el-input>
                </el-form-item>
                <el-form-item label="折扣价" prop="name">
                    <el-input v-model="addForm.discountPrice" auto-complete="off" placeholder="元"></el-input>
                </el-form-item>
                <el-form-item label="最低价格" prop="minPrice">
                    <el-input v-model="addForm.minPrice" auto-complete="off" placeholder="元"></el-input>
                </el-form-item>
                <el-form-item label="最大年龄" prop="maxAge">
                    <el-input v-model="addForm.maxAge" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="最小年龄" prop="minAge">
                    <el-input v-model="addForm.minAge" auto-complete="off"></el-input>
                </el-form-item>
          </el-form>
          <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
              <el-form-item label="产品介绍"  prop="name">
               <!--  <el-input v-model="addForm.introduceUrl"  auto-complete="off"></el-input> -->
                  <el-upload
                  class="upload-demo"
                  :action= "picURL"
                  :on-success="handleSuccessIntroduceUrl"
                  :on-remove="handleRemoveIntroduceUrl"
                  :file-list="fileList1IntroduceUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
              </el-form-item>
              <el-form-item label="保障方案"  prop="name">
                <!-- <el-input v-model="addForm.schemeUrl"  auto-complete="off"></el-input> -->
                <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="handleSuccessSchemeUrl"
                  :on-remove="handleRemoveSchemeUrl"
                  :file-list="fileList1SchemeUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="图标地址"  prop="name">
                 <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="handleSuccessImgUrl"
                  :on-remove="handleRemoveImgUrl"
                  :file-list="fileList1ImgUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="服务详情"  prop="name">
                <!-- <el-input v-model="addForm.detailUrl"  auto-complete="off"></el-input> -->
                <el-upload
                  class="upload-demo"
                  :action="picURL"
                  :on-success="handleSuccessDetailUrl"
                  :on-remove="handleRemoveDetailUrl"
                  :file-list="fileList1DetailUrl"
                  :multiple="true"
                  list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
              <el-form-item label="备注"  prop="name">
                <el-input v-model="addForm.remark"  auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item v-show='ishotValue'  label="热销备注"  prop="name">
                <el-input v-model="addForm.tbSpHotproduct.introduceUrl"  auto-complete="off"></el-input>
              </el-form-item> -->
              <el-form-item label="描述" prop="name">
                <el-input  type="textarea"  v-model="addForm.descrition" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="详细介绍" prop="name">
                <el-input type="textarea"  v-model="addForm.detail" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="计划" prop="name">
                <el-card class="box-card">
                  <el-button type="primary" @click="planAdd">添加</el-button>
                    <el-card v-for="(temp,index) in addForm.tbSpPlans" :key="index" class="box-card" style="margin-top:10px;">
                        <span style="line-height: 36px;">计划{{index+1}}</span>
                        <el-button type="primary" v-show="planShow(index)" style="float:right;"  @click="planRemove(index,'add')">删除</el-button>
                        <el-form-item label="ID" prop="name">
                          <el-input v-model="temp.planId" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="序号" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.serialNo" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="计划名称" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.planName" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                         <el-form-item label="投保声明" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.statement" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="理赔须知" prop="name" style="margin-top:10px;">
                          <el-input v-model="temp.notice" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="name" style="margin-top:10px;">
                          <el-input type="textarea" v-model="temp.remark" auto-complete="off" style="max-width:80%;"></el-input>
                        </el-form-item>
                        <el-form-item label="保险条款"  prop="name">
                            <el-upload
                              class="upload-demo"
                              :action="picURL"
                              :on-success="AddhandlePreview"
                              :file-list="FileData(fileList[index])"
                              :multiple="true">
                              <el-button size="small" type="primary" @click='uploadClause(index)'>点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-card>
                </el-card>
              </el-form-item>
          </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!-- 热销 -->
    <el-dialog title="热销" v-model="hotFormVisible" :close-on-click-modal="false">
          <el-form :model="hotForm"  label-width="120px" :rules="hotFormRules" ref="hotForm">
              <el-form-item label="热销序号"  prop="name">
                <el-input v-model="hotForm.serialNo"  style="width:211px;" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item  label="地区" prop="name">
                    <el-select  v-model="hotForm.branchCode"   placeholder="地区">
                      <el-option label="重庆" value="1"></el-option>
                      <el-option label="北京" value="2"></el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="备注" prop="name">
                <el-input  type="textarea"  v-model="hotForm.remark" auto-complete="off"></el-input>
              </el-form-item>
          </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hotFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="hotSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import util from '../../common/js/util'

  import commons from '../../common/js/common'
  //import NProgress from 'nprogress'
  import { getUserListPage, removeProduct, batchRemoveUser, editProduct, addProduct , editHot, getHotProduct, codeNodeList,base,picURL} from '../../api/api';

  export default {
    data() {
      return {
        filters: {
          productCname:'',
          riskCode:'',
          startDate:'',
          endDate:'',
          riskCodes:''
        },
        picURL:picURL,
        baseUrl: base,
        riskCodes:[],
        fileList1IntroduceUrl:[],
        fileList1SchemeUrl:[],
        fileList1ImgUrl:[],
        fileList1DetailUrl:[],
        fileList2IntroduceUrl:[],
        fileList2SchemeUrl:[],
        fileList2ImgUrl:[],
        fileList2DetailUrl:[],
        fileList:[[],[]
        ],
        fileLists:[[]],
        products: [],
        uploadValue:'',
        total: 0,
        page: 1,
        listLoading: false,
        sels: [],//列表选中列
        ishotValue:false,
        editFormVisible: false,//修改界面是否显示
        hotFormVisible:false,//热销界面是否显示
        editLoading: false,
        editFormRules: {
          productCname: [
            { required: true, message: '请输入中文名', trigger: 'blur' }
          ],
          riskCode: [
            { required: true, message: '请选择险种', trigger: 'blur' }
          ],
          productCname: [
            { required: true, message: '请输入中文名', trigger: 'blur' }
          ],
          startDate: [
            { required: true, message: '请选择有效起期', trigger: 'blur' }
          ],
          endDate: [
            { required: true, message: '请选择有效止期', trigger: 'blur' }
          ],
          deadLine: [
            { required: true, message: '请输入保障期限', trigger: 'blur' }
          ]
          // ,
          // quantity: [
          //   { required: true, message: '请输入销量', trigger: 'blur' }
          // ],
          // minPrice: [
          //   { required: true, message: '请输入最低价格', trigger: 'blur' }
          // ],
          // maxAge: [
          //   { required: true, message: '请输入最大年龄', trigger: 'blur' }
          // ],
          // minAge: [
          //   { required: true, message: '请输入最小年龄', trigger: 'blur' }
          // ],
          // imgUrl: [
          //   { required: true, message: '请输入图标地址', trigger: 'blur' }
          // ]
        },
        hotFormRules:{

        },
        //修改界面数据
        editForm: {
          productCname: '',
          productEname: '',
          productType:'',
          serialNo:'',
          riskCode:'',
          isShow:'',
          quantity:'',
          priPrice:'',
          discountPrice:'',
          minPrice:'',
          introduceUrl:'',
          schemeUrl:'',
          imgUrl:'',
          remark:'',
          detailUrl:'',
          descrition:'',
          detail:'',
          deadLine: '',
          maxAge: '',
          minAge: '',
          startDate: '',
          endDate: '',
          riskCodes:'',
          tbSpPlans:[{
              planId:'',
              planName:'',
              serialNo:'',
              remark:'',
              statement:'',
              notice:'',
              clauseUrl:''

          }]
        },
        temps:[{
              planId:'',
              planName:'',
              serialNo:'',
              remark:''
          }],
        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          productCname: [
            { required: true, message: '请输入中文名', trigger: 'blur' }
          ],
          riskCode: [
            { required: true, message: '请选择险种', trigger: 'blur' }
          ],
          productCname: [
            { required: true, message: '请输入中文名', trigger: 'blur' }
          ],
          startDate: [
            { required: true, message: '请选择有效起期', trigger: 'blur' }
          ],
          endDate: [
            { required: true, message: '请选择有效止期', trigger: 'blur' }
          ]
          // ,
          // deadLine: [
          //   { required: true, message: '请输入保障期限', trigger: 'blur' }
          // ],
          // quantity: [
          //   { required: true, message: '请输入销量', trigger: 'blur' }
          // ],
          // minPrice: [
          //   { required: true, message: '请输入最低价格', trigger: 'blur' }
          // ],
          // maxAge: [
          //   { required: true, message: '请输入最大年龄', trigger: 'blur' }
          // ],
          // minAge: [
          //   { required: true, message: '请输入最小年龄', trigger: 'blur' }
          // ],
          // imgUrl: [
          //   { required: true, message: '请输入图标地址', trigger: 'blur' }
          // ]

        },
        //新增界面数据
        addForm: {
          productCname:'',
          productEname:'',
          productType:'',
          serialNo:'',
          riskCode:'',
          isShow:'',
          quantity:'',
          priPrice:'',
          discountPrice:'',
          minPrice:'',
          introduceUrl:'',
          schemeUrl:'',
          imgUrl:'',
          remark:'',
          detailUrl:'',
          descrition:'',
          detail:'',
          deadLine: '',
          maxAge: '',
          minAge: '',
          startDate: '',
          endDate: '',
          riskCodes:'',
          // hotFlag:'',
          tbSpPlans:[{
              planId:'',
              planName:'',
              serialNo:'',
              remark:'',
              statement:'',
              notice:'',
              clauseUrl:''
          }]
          // tbSpPlans:{
          //     planId:'',
          //     planName:'',
          //     serialNo:'',
          //     remark:''
          // }
        },
        hotForm:{
            productId:'',
            branchCode:'',
            remark:'',
            serialNo:'',
            introduceUrl:''
        }
      }
    },
    methods: {
      FileData(value){
        if(value){
          return value;
        }
      },
      editRemoveIntroduceUrl(file, fileList){
        this.editForm.introduceUrl= commons.RemoveUrl(this.editForm.introduceUrl,file);
      },
      editRemoveSchemeUrl(file, fileList){
        this.editForm.schemeUrl=commons.RemoveUrl(this.editForm.schemeUrl,file);
      },
      editRemoveImgUrl(file, fileList){
        this.editForm.imgUrl=commons.RemoveUrl(this.editForm.imgUrl,file);
      },
      editRemoveDetailUrl(file, fileList){
        this.editForm.detailUrl=commons.RemoveUrl(this.editForm.detailUrl,file);
      },
      handleRemoveIntroduceUrl(file, fileList){
        this.addForm.IntroduceUrl=commons.RemoveUrl(this.addForm.IntroduceUrl,file);
      },
      handleRemoveSchemeUrl(file, fileList) {
        this.addForm.SchemeUrl=commons.RemoveUrl(this.addForm.SchemeUrl,file);
      },
      handleRemoveImgUrl(file, fileList) {
        this.addForm.ImgUrl=commons.RemoveUrl(this.addForm.ImgUrl,file);
      },
      handleRemoveDetailUrl(file, fileList) {
        this.addForm.DetailUrl=commons.RemoveUrl(this.addForm.DetailUrl,file);
      },
      //产品介绍
      handleSuccessIntroduceUrl(response, file, fileList) {
        this.addForm.introduceUrl = commons.SuccessUrl(this.addForm.introduceUrl,file);
      },
      editSuccessIntroduceUrl(response, file, fileList) {
          this.editForm.introduceUrl = commons.SuccessUrl(this.editForm.introduceUrl,file);
      },
      //保障方案
      handleSuccessSchemeUrl(response, file, fileList) {
          this.addForm.schemeUrl = commons.SuccessUrl(this.addForm.schemeUrl,file);
      },
      editSuccessSchemeUrl(response, file, fileList) {
          this.editForm.schemeUrl = commons.SuccessUrl(this.editForm.schemeUrl,file);
      },
      //图标地址
      handleSuccessImgUrl(response, file, fileList) {
          this.addForm.imgUrl = commons.SuccessUrl(this.addForm.imgUrl,file);
      },
      editSuccessImgUrl(response, file, fileList) {
          this.editForm.imgUrl = commons.SuccessUrl(this.editForm.imgUrl,file);
      },
      //服务详情
      handleSuccessDetailUrl(response, file, fileList) {
          this.addForm.detailUrl = commons.SuccessUrl(this.addForm.detailUrl,file);
      },
      editSuccessDetailUrl(response, file, fileList) {
          this.editForm.detailUrl = commons.SuccessUrl(this.editForm.detailUrl,file);
      },
      //add保险条款
      AddhandlePreview(response, file){
        var index = this.uploadValue;
        this.addForm.tbSpPlans[index].clauseUrl = commons.SuccessUrl(this.addForm.tbSpPlans[index].clauseUrl,file);
      },
      //edit保险条款
      EdithandlePreview(response, file){
        var index = this.uploadValue;
        this.editForm.tbSpPlans[index].clauseUrl = commons.SuccessUrl(this.editForm.tbSpPlans[index].clauseUrl,file);
      },
      uploadClause(index){

        this.uploadValue = index;
      },
      clausehandleRemove(file, fileList){
      },
      submitUploadAdd(){
        this.$refs.upload.submit();
      },
      submitUploadEdit(){
        this.$refs.upload2.submit();
      },
      planAdd: function(){
        this.addForm.tbSpPlans.push({
            planId:'',
            planName:'',
            serialNo:'',
            remark:'',
            statement:'',
            notice:'',
            clauseUrl:''
        });
      },
      planRemove: function(index,str){
        if(str=='add'){
          this.addForm.tbSpPlans.splice(index,1);
        }
        else{
          this.editForm.tbSpPlans.splice(index,1);
        }
      },
      planShow: function(index){
        if(index == 0){
          return false;
        }
        else{
          return true;
        }
      },
      ShowFileName:function() {
        let files = $("#file").files;
      },
      //险种编码转换
      formatRisk: function (row, column) {
        return row.riskCode == '2725' ? '个意险' : (row.riskCode == '2726' ? '旅行险' : '家财险');
      },
      formatOrg: function (row,column) {
        return row.organizationId && row.organizationId.name ? row.organizationId.name : '-';
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getProducts();
      },
      //获取用户列表
      getProducts() {
        // let para = {
        //   pageSize: 10,
        //   pageNumber: this.page,
        //   productCname:'',
        //   riskCode:'',
        //   startDate:'',
        //   endDate:''
        // };
        let para = new FormData();
        para.append("pageSize",10);
        para.append("pageNumber",this.page);
        para.append("productCname",this.filters.productCname);
        para.append("riskCode",this.filters.riskCode);
        para.append("startDate",this.filters.startDate);
        para.append("endDate",this.filters.endDate);
        para.append("branchCode",'');
        this.listLoading = true;
        //NProgress.start();
        getUserListPage(para).then((res) => {
        this.total = res.data.result.totalElements;
        this.products = res.data.result.content;
        this.listLoading = false;
        //NProgress.done();
        });

        let riskList = new FormData();

        riskList.append("type","RiskCode");

        codeNodeList(riskList).then((res) => {
          this.riskCodes=res.data.result;
        });

      },
      //设置计划
      handlePlan: function(index, row){
        window.open('/#/product/handlePlan');
      },
      //删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = new FormData();
          para.append("ids", row.id);
          removeProduct(para).then((res) => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getProducts();
          });
        }).catch(() => {

        });
      },

      //table导出excel
      export2Excel: function() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　　　　　　const tHeader = ['ID', '产品中文名', '产品英文名', '险种', '有效起期', '有效止期', '保障期限','最大年龄','最小年龄','销量', '原价', '折扣价', '最低价格'];
　　　　　　　　const filterVal = ['id', 'productCname', 'productEname', 'risk_code', 'startDate', 'endDate', 'deadLine', 'maxAge', 'minAge', 'quantity', 'priPrice', 'discount_price', 'min_price'];
　　　　　　　　const list = this.products;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '产品列表excel');
　　　　　　})
　　　　},
　　　formatJson:function(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　},

      //显示修改界面
      handleEdit: function (index, row) {
        let _this = this;
        let riskList = new FormData();
        riskList.append("type","RiskCode");
        codeNodeList(riskList).then((res) => {
          _this.filters.riskCodes=res.data.result;
          _this.addForm.riskCodes=res.data.result;
          _this.editForm.riskCodes=res.data.result;
        });
        _this.editFormVisible = true;
        _this.editForm = Object.assign({}, row);
        _this.fileList2IntroduceUrl=[];
        _this.fileList2SchemeUrl=[];
        _this.fileList2ImgUrl=[];
        _this.fileList2DetailUrl=[];
        _this.fileLists = [];
        _this.editForm.tbSpPlans =[{
              planId:'',
              planName:'',
              serialNo:'',
              remark:'',
              statement:'',
              notice:'',
              clauseUrl:''
          }];


        if(row.tbSpPlans.length>=1){
          var clUrl =[];
          for(var i in row.tbSpPlans){
            if(i==0){
              _this.editForm.tbSpPlans[i] = row.tbSpPlans[i];
            }
            else{
              _this.editForm.tbSpPlans.push(row.tbSpPlans[i]);
            }
            if(row.tbSpPlans[i].clauseUrl){
                clUrl =  row.tbSpPlans[i].clauseUrl.split(",");
                _this.fileLists.push([]);
                for(var k in clUrl){
                   _this.fileLists[i].push({
                    name:commons.interceptName(clUrl[k]),
                    url: clUrl[k]
                    });
                }
            }

          }
        }
        var URL1 = row.introduceUrl.split(",")
        if(URL1.length>0&&URL1[0]!=""){
            for(var i in URL1){
              _this.fileList2IntroduceUrl.push({
                name:commons.interceptName(URL1[i]),
                url: URL1[i]
              });
            }
        }
        else{
          _this.fileList2IntroduceUrl = [];
        }
        _this.editForm.introduceUrl = URL1.join(',');

        URL1 = row.schemeUrl.split(",")
        if(URL1.length>0&&URL1[0]!=""){
            for(var i in URL1){
              _this.fileList2SchemeUrl.push({
                name:commons.interceptName(URL1[i]),
                url: URL1[i]
              });
            }
        }
        else{
          _this.fileList2SchemeUrl = [];
        }

        _this.editForm.schemeUrl = URL1.join(',');



        URL1 = row.imgUrl.split(",")
        if(URL1.length>0&&URL1[0]!=""){
            for(var i in URL1){
              _this.fileList2ImgUrl.push({
                name:commons.interceptName(URL1[i]),
                url: URL1[i]
              });
            }
        }
        else{
          _this.fileList2ImgUrl = [];
        }
        _this.editForm.imgUrl = URL1.join(',');


        URL1 = row.detailUrl.split(",")
        if(URL1.length>0&&URL1[0]!=""){
            for(var i in URL1){
              _this.fileList2DetailUrl.push({
                name:commons.interceptName(URL1[i]),
                url: URL1[i]
              });
            }
        }
        else{
            _this.fileList2DetailUrl = [];
        }
        _this.editForm.detailUrl = URL1.join(',');

      },
      //显示热销界面
      // handleHot: function(index, row){
      //   this.hotForm={
      //       productId:row.id,
      //       branchCode:'',
      //       remark:'',
      //       serialNo:'',
      //       introduceUrl:''
      //   }
      //   console.log(row);
      //   this.hotFormVisible = true;
      //   if(row.hotFlag=="1"){
      //     this.listLoading = true;
      //     let para = new FormData();
      //     para.append("productId",row.id);
      //     console.log(row.id);
      //     getHotProduct(para).then((res) => {
      //       console.log(res);
      //       this.listLoading = false;
      //       this.hotForm.productId = row.id;
      //       this.hotForm.branchCode = res.data.result.branchCode;
      //       this.hotForm.remark = res.data.result.remark;
      //       this.hotForm.serialNo = res.data.result.serialNo;
      //       this.hotForm.introduceUrl = res.data.result.introduceUrl;
      //     });


      //   }
      //   this.hotForm.productId=row.id;

      // },
      //显示新增界面
      handleAdd: function () {
        this.addFormVisible = true;
        this.fileList1IntroduceUrl=[],
        this.fileList1SchemeUrl=[],
        this.fileList1ImgUrl=[],
        this.fileList1DetailUrl=[],
        this.addForm = {
          // id: '',
          productCname:'',
          productEname:'',
          productType:'',
          serialNo:'',
          riskCode:'',
          isShow:'1',
          quantity:'',
          priPrice:'',
          discountPrice:'',
          minPrice:'',
          introduceUrl:'',
          schemeUrl:'',
          imgUrl:'',
          remark:'',
          detailUrl:'',
          descrition:'',
          detail:'',
          deadLine: '',
          maxAge: '',
          minAge: '',
          startDate: '',
          endDate: '',
          riskCodes:'',
          // hotFlag:'',
          tbSpPlans:[{
              planId:'',
              planName:'',
              serialNo:'',
              remark:'',
              statement:'',
              notice:'',
              clauseUrl:''
          }]
        };
        this.fileList = [[],[]];
      },
      //修改
      editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.editForm);
              para.startDate = (!para.startDate || para.startDate == '') ? '' : util.formatDate.format(new Date(para.startDate), 'yyyy-MM-dd');
              para.endDate = (!para.endDate || para.endDate == '') ? '' : util.formatDate.format(new Date(para.endDate), 'yyyy-MM-dd');
              editProduct(para).then((res) => {
                this.editLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['editForm'].resetFields();
                this.editFormVisible = false;
                this.getProducts();
              });
            });
          }
        });
      },
      //热销
      hotSubmit: function(){
        this.$refs.hotForm.validate((valid) => {
          if (valid) {
              this.$confirm('确认提交吗？', '提示', {}).then(() => {
                this.addLoading = true;
                let para = Object.assign({}, this.hotForm);
                editHot(para).then((res) => {
                this.addLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['hotForm'].resetFields();
                this.hotFormVisible = false;
                this.getProducts();
              });
              });
          }
        });
      },
      //新增
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.addForm);
              para.startDate = (!para.startDate || para.startDate == '') ? '' : util.formatDate.format(new Date(para.startDate), 'yyyy-MM-dd');
              para.endDate = (!para.endDate || para.endDate == '') ? '' : util.formatDate.format(new Date(para.endDate), 'yyyy-MM-dd');
              addProduct(para).then((res) => {
                this.addLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['addForm'].resetFields();
                this.addFormVisible = false;
                this.getProducts();
              });
            });
          }
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      //批量删除
      batchRemove: function () {
        var ids = this.sels.map(item => item.id).toString();
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();
          // let para = { ids: ids };
          let para = new FormData();
          para.append("ids", ids);
          removeProduct(para).then((res) => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getProducts();
          });
        }).catch(() => {

        });
      }
    },
    mounted() {
      this.getProducts();
    }
  }

</script>

<style scoped>

</style>